<template>
  <div>
    <h1>商品展示</h1>
    <el-input v-model="search" placeholder="搜索商品"></el-input>
    <el-button @click="searchProducts">搜索</el-button>
    <el-row>
      <el-col v-for="product in products" :key="product.id" :span="6">
        <el-card :body-style="{ padding: '20px' }">
          <h3>{{ product.name }}</h3>
          <img :src="product.image" alt="Product Image" />
          <p>{{ product.description }}</p>
          <el-button @click="viewProduct(product.id)">查看详情</el-button>
          <el-button @click="addToCart(product.id)">加入购物车</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getProductList } from '@/api/product';

export default {
  data() {
    return {
      products: [],
      search: '',
    };
  },
  methods: {
    async fetchProducts() {
      const response = await getProductList();
      this.products = response.data;
    },
    searchProducts() {
      // 搜索逻辑
    },
    viewProduct(id) {
      this.$router.push({ path: `/products/${id}` });
    },
    addToCart(productId) {
      // 添加到购物车逻辑
    },
  },
  mounted() {
    this.fetchProducts();
  },
};
</script>

<style scoped>
.home {
  padding: 20px;
}
</style>